<template>
	<view class="p-12 static">
		<view class="w-full px-10">
			<view class="text-18">余额</view>
			<view class="flex flex-row align-items-center py-20">
				<image class="" style="width: 54rpx; height: 54rpx;" src="/static/amount.png"></image>
				<view class="text-24 text-bold">￥{{userInfo.balance}}</view>
				<view class="ml-5 text-14 pt-5" style="color: #006AFF;" @tap="toCash">提现></view>
			</view>
		</view>
		<view class="border-1 rounded-base bg-white" style="border-color: #BBB; margin-top: 40rpx; min-height: 70vh;">
			<view class="bottom-line">
				<view class="flex flex-row text-14 align-items-center mx-12 text-bold" style="height: 86rpx;">
					任务结算记录
				</view>
			</view>
			<view v-for="item in list" :key="item.id" class="bottom-line py-5" style="color: #7d7d7d;">
				<view v-if="item.type==1" class="flex flex-row text-14 align-items-center mx-12" style="line-height: 45rpx;">
					<view class="flex-1">{{item.task.name}}</view>
					<view class="">{{item.task.category_name}}</view>
				</view>
				<view v-else-if="item.type==-1" class="flex flex-row text-14 align-items-center mx-12" style="line-height: 45rpx;">
					<view class="flex-1">余额提现成功</view>
					<view class="">余额提现</view>
				</view>
				<view v-else-if="item.type==2" class="flex flex-row text-14 align-items-center mx-12" style="line-height: 45rpx;">
					<view class="flex-1">余额提现失败，提现金额恢复</view>
					<view class="">余额提现</view>
				</view>
				<view class="flex flex-row text-14 align-items-center mx-12" style="line-height: 45rpx;">
					<view class="flex-1">结算时间：{{item.create_at}}</view>
					<view v-if="item.amount >= 0" class="text-bold text-15" style="color: #FF3838;">+￥{{Math.abs(item.amount)}}</view>
					<view v-else class="text-bold text-15" style="color: #09B200;">-￥{{Math.abs(item.amount)}}</view>
				</view>
			</view>
		</view>
		<view class="text-14 text-center my-10" style="color: #000"> ~ 暂无更多记录 ~ </view>
	</view>
</template>

<script>
	import request from '/utils/request.js';
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				has_more: true,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
		
		},
		onShow() {
			this.getList(true);
		},
		onReachBottom() {
			this.getList();
		},
		onShareAppMessage() {
			return {
			  title: '飞兔接单',
			  path: '/pages/task/list',
			  // imageUrl : ''
			}
		},
		onShareTimeline() {
			return {
			  title: '飞兔接单',
			  // query: '',
			  // imageUrl : ''
			}
		},
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			// 获取余额记录
			getList(force = false){
				if(force) {
					this.page = 1;
					this.has_more = true;
				};
				if(!this.has_more) return;
				request.post('/pilot/balanceList', {
					page: this.page,
					limit: 20,
				}).then(res=>{
					this.list = force ? res.list : this.list.concat(res.list);
					this.has_more = res.has_more;
					this.page = res.page + 1;
				})
			},
			navigateTo($url){
				uni.navigateTo({
					'url': $url
				})
			},
			
			// 跳转提现
			toCash(){
				if(!this.userInfo.phone){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(()=>{
						this.navigateTo('/pages/login')
					},1000)
				}else{
					this.navigateTo('/pages/user/to_cash')
				}
			},
			
		}
	}
</script>

<style>
	page{
		background-color: #FFF8F5;
	}
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
</style>
